<script setup lang="ts">
import {useI18n} from "vue-i18n";
import type {BasicInfo} from "@/typex/modules/item.ts";
import {onMounted, ref} from "vue";

let composer = useI18n({useScope: 'global'});
let selected = ref(localStorage.getItem('language') || "en");

let props = defineProps({
    language: {
        type: Array<BasicInfo> || [],
        required: true
    }
});


onMounted(() => {
    ToChangeLanguage(selected.value)

})
const ToChangeLanguage = (target: string) => {
    console.log("target",target)
    composer.locale.value = target
    localStorage.setItem('language', target)
}
const options = props.language?.map((item: BasicInfo) => {
        return {
            label: item.name,
            key: item.value
        };
    }
) || []

const handleSelect = (key: string) => {
    ToChangeLanguage(key)
}

</script>
<template lang="pug">
select(v-model="selected")
    option(v-for="(item,index) in language" :value="item.value" @click="ToChangeLanguage(item.value)") {{item.name}}
NDropdown(trigger="hover" @select="handleSelect" :options="options") Language

</template>
<style scoped lang="scss">
.icon_button {
    display: flex;
    padding: 0px 10px 10px 15px;
    border-radius: 8px;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
    cursor: pointer;
    height: 23px;
}

.icon {
    position: relative;
    align-items: center;
    height: 23px;
    margin-top: 10px;
    padding: 2px 2px 2px 2px;
}

</style>


